<template>
  <div style="width: 100%; height: 100%; border: 1px red solid">
    <div id="map" style="margin: 0 auto; width: 100%; height: 100%" />
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import {
  webSockUrl,
  webSockStatisticsUrl,
  cameraServerUrl,
  baseUrl,
  initPicPath,
  webSockMonitorUrl,
  rateHeartShow
} from '@/utils/global'
import { getMapTree, getMap, getAllDeptDetail } from '@/api/location'
export default {
  data() {
    return {
      mapObj: null,
      systemID: null,
      ws: null,
      mapTreeData: null,
      mapId: null,
      layerName: null,
      markersdata: null
    }
  },
  mounted() {
    this.list()
  },
  methods: {
    list() {
      this.webSocketPosition()
      getMapTree().then((res) => {
        const RES = this.responseUse(res)
        if (typeof RES !== 'undefined') {
          this.mapTreeData = RES
          this.mapId = RES[0].id
          this.layerName = RES[0].label
          console.log(this.mapId, this.layerName)
          this.getMapData()
        }
      })
    },
    getMapData() {
      if (this.mapId == this.oldMapId) {
        this.$message({
          message: i18n.t('realtime.areaQequired'),
          type: 'warning'
        })
      } else {
        this.oldMapId = this.mapId
        getMap(this.mapId).then((res) => {
          const RES = this.responseUse(res)
          if (RES != undefined) {
            this.maps(RES)
            const param = JSON.stringify({
              key: this.systemID,
              layerId: this.mapId
            })
            this.webSocketOnSend(param)
          }
        })
      }
    },
    webSocketPosition() {
      const self = this
      self.systemID = new Date().getTime().toString()
      var param = JSON.stringify({
        register: self.systemID
      })
      if ('WebSocket' in window) {
        // self.ws = new WebSocket(webSockUrl)
        console.log('查看推送地址', webSockUrl, getToken())
        const kkkk = 'Bearer ' + getToken()
        self.ws = new WebSocket(webSockUrl)
        self.ws.onopen = function() {
          self.webSocketOnSend(param)
          console.log('数据发送中...')
        }
        self.ws.onmessage = function(evt) {
          self.getMessage(evt.data)
        }
        self.ws.onclose = function(res) {
          console.log('连接已关闭1', res, webSockUrl)
        }
        self.ws.onerror = function(err) {
          console.log('连接东西而已1', err, webSockUrl)
        }
      } else {
        console.log('您的浏览器不支持WebSocket!')
      }
    },
    webSocketOnSend(data) {
      const self = this
      if (self.ws.readyState === 1) {
        self.ws.send(data)
      }
    },
    getMessage(el) {
      const self = this
      const result = $.parseJSON(el)
      if (result.message === 'handshake') {
      } else if (result.message === 'Point') {
        console.log(result.data.features)
        this.markersdata = result.data.features
        self.bLockEx = false
        this.markerslist()
      }
    },
    maps(RES) {
      this.mapObj = new gis.HMap2D('http://114.116.194.186:9090')

      var paramObj = {
        container: document.getElementById('map'),
        center: [38.86073, 121.50932], // 中心点定义在config.js
        zoom: 17,
        maxZoom: 30,
        minZoom: 1,
        layers: [],
        mapStyle: 'dark',
        viewMode: '2D',
        workspaceName: 'vrgv',
        access_token: 'c0bec893-0a02-4776-b1b4-d9400f9dee19' // ''
      }

      this.mapObj.loadMap(paramObj)
    },
    markerslist() {
      var markers = []
      let marker = null
      for (let i = 0; i < this.markersdata.length; i++) {
        console.log(this.markersdata[i].properties.itemname)
        marker = {
          position: [
            38.86073 + this.markersdata[i].geometry.coordinates[0] / 10000,
            121.50932 + this.markersdata[i].geometry.coordinates[1] / 10000
          ],
          title: this.markersdata[i].properties.itemname,
          enableHoverTitleShow: false,
          image: require('../../../assets/images/5ren.png'),
          width: 32,
          height: 48,

          widthSelected: 36,
          heightSelected: 50,
          tag: '这是marker1的自定义tag',
          buildingId: '',
          floorId: '',
          isMarkerIndoor: false
        }
        markers.push(marker)
      }

      var paramObj = {
        layerId: 'lm01',
        layerIndex: 500,
        markers: markers
      }

      this.mapObj.deleteLayer(paramObj)
      this.mapObj.addMarker(paramObj)
    }
  }
}
</script>

<style>
</style>
